<template>
  <div style="width: 100%;height: 100%;background-color: white;">
    <div class="list">
      <div>
        <div v-for="(item,i) in itemTitle"
        :key="i"
        @click="toItem(i+1)"
        :class="activeKey==(i+1)?'focus':''">{{ item }}</div>
      </div>
    </div>
    <customerInfo v-if="activeKey == 1" :customerId="customerId" />
    <followState v-if="activeKey == 2" :customerId="customerId" />
    <staff-appoint v-if="activeKey == 3" ref="staffAppoint" :customerId="customerId" />
    <depositPay v-if="activeKey == 4" ref="depositPay" :customerId="customerId" />
    <design-service v-if="activeKey == 5" ref="designService" :customerId="customerId" />
    <customer-file-list v-if="activeKey == 6" ref="customerFileList" :customerId="customerId" />
    <customer-contract v-if="activeKey == 7" ref="customerContract" :customerId="customerId" />
    <project-balance-accounts-list v-if="activeKey == 8" ref="projectBalanceAccountsList" :customerId="customerId" />
    <cost-production ref="costProduction" v-if="activeKey == 9" :customerId="customerId" />
    <labour-distribute ref="labourDistribute" v-if="activeKey == 10" :customerId="customerId" />
    <progress-info ref="progressInfo" v-if="activeKey == 11" :customerId="customerId" />
    <circuit ref="circuit" v-if="activeKey == 12" :customerId="customerId" />
    <project-check-and-accept v-if="activeKey == 13" ref="projectCheckAndAccept" :customerId="customerId" />
    <progress-log ref="progressLog" v-if="activeKey == 14" :customerId="customerId" />
  </div>
</template>

<script>
import customerInfo from './customerInfo'
import followState from './followState'
import staffAppoint from "./staffAppoint.vue";
import designDemand from "./designDemand.vue";
import customerFileList from "./customerFileList.vue";
import projectCheckAndAccept from "./projectCheckAndAccept.vue";
import depositPay from "./depositPay.vue";
import assign from './assign'
import labourDistribute from "./labourDistribute.vue";
import costProduction from "./costProduction.vue";
import circuit from "./circuit.vue";
import progressInfo from "./progressInfo.vue";
import progressLog from "./progressLog.vue"
import projectBalanceAccountsList from "./projectBalanceAccountsList.vue";
import customerContract from "./customerContract.vue";
import designService from "./designService.vue";
import gantt from "dhtmlx-gantt";

export default {
  name: 'InfoTab',
  components: {
    customerInfo,
    followState,
    assign,
    staffAppoint,
    designDemand,
    customerFileList,
    projectCheckAndAccept,
    labourDistribute,
    depositPay,
    circuit,
    costProduction,
    progressInfo,
    progressLog,
    projectBalanceAccountsList,
    customerContract,designService},
  data() {
    return {
      customerId: this.$route.query.id,
      activeKey: "1",
      itemTitle:[
        "客户信息",
        "跟进状态",
        "人员指派",
        "意向购买",
        "订单制作",
        "客户资料",
        "客户合同",
        "项目结算",
        "成本制作",
        "劳务派发",
        "施工进度",
        "工地巡检",
        "项目验收",
        "施工日志",
      ],

    }
  },
  created() {
    let key = this.$route.query.key;
    if (key != null){
      this.activeKey = key;
    }
  },
  methods: {
    toItem(i){
      this.activeKey = i
    }
  }
}
</script>

<style scoped lang="less">
  ::-webkit-scrollbar {
    display: none;
  }
  .list{
    width: 100%;
    height: 50px;
    overflow: hidden;
    overflow-x: scroll;
    border-bottom: 1px solid #f6f6f6;
    &>div{
      display: flex;
      width: max-content;
      div{
        width: 100px;
        line-height: 50px;
        text-align: center;
      }
      div::after{
        display: block;
        margin: -3px auto 0;
        width: 0px;
        height: 2px;
        content: '';
        background-color: #40a9ff;
      }
      .focus{
        color: #40a9ff;
      }
      .focus::after{
        width: 4em;
        transition: 0.5s;
      }
    }
  }
</style>